<template>
	<el-main>
		<el-steps :active="active" finish-status="success">
		  <el-step title="基本信息"></el-step>
		  <el-step title="商品描述"></el-step>
		  <el-step title="规格参数"></el-step>
		  <el-step title="SKU规格参数"></el-step>
		</el-steps>
		<el-card>
			<ProductBaseInfo ref="productBaseInfo" @fatherM="fatherMethod" v-if="active==0"></ProductBaseInfo>
			<Editor ref="quillEditor" v-model="spu.content" v-if="active==1"></Editor>
			<ProductParams ref="productParams" v-if="active==2"></ProductParams>
			<ProductSkuParams ref="productSkuParams" msg="test" v-if="active==3"></ProductSkuParams>
		</el-card>
		<div style="margin-bottom: 10px;">
			<el-button style="margin-top: 12px;" @click="pre" v-if="active>0">上一步</el-button>
			<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
		</div>
	</el-main>
	
</template>

  <script>
  import Editor from '../../components/QuillEditor.vue';
  import ProductBaseInfo from '../../components/ProductBaseInfo.vue';
  import ProductParams from '../../components/ProductPrams.vue';
  import ProductSkuParams from '../../components/ProductSkuParams.vue';
  export default {
    components: {
      Editor,ProductBaseInfo,ProductParams,ProductSkuParams
    },
    data() {
      return {
		active:0,
        spu: {
          content: '产品描述，富文本编辑器',
        }
      }
    },
	methods:{
		next() {
			if(this.active==0){
				this.$refs.productBaseInfo.childMethod();
			}else if(this.active==1){
				this.$refs.quillEditor.childMethod();
			}else if(this.active==2){
				this.$refs.productParams.savePrams();
			}else if(this.active==3){
				this.$refs.productSkuParams.save();
			}
			
			if(this.active<4){
				this.active++;
			}
			
		},
		pre(){
			if(this.active>0){
				this.active--;
			}
		},
		fatherMethod(){
			console.log("parentMethods");
		}
	}
  }
  </script>

<style scoped>

</style>